@extends('system.frame_layout')
<?php $parent_menu = "会员管理"; $menu_selected = "会员推荐关系图";?>

@section('head')
    <link rel="stylesheet" href="{{ asset('zTree/css/zTreeStyle/zTreeStyle.css') }}" type="text/css">
@endsection

@section('content')
    <div id="content-panel">
        <div class="row">
            <div class="col-xs-12">
                <div class="portlet light bordered">
                    <div class="portlet-title">
                        <div class="caption">
                            <i class="icon-social-dribbble font-dark hide"></i>
                            <span class="caption-subject font-dark bold">我的推荐子会员 My Child User</span>
                        </div>
                    </div>
                    <div class="portlet-body">
                        <div class="zTreeDemoBackground left">
                            <ul id="treeDemo" class="ztree"></ul>
                        </div>
                        <div class="clearfix"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('footer')
    <script type="text/javascript" src="{{ asset('zTree/js/jquery.ztree.core.js') }}"></script>
    <script type="text/javascript">
        var setting = {
            data: {
                key: {
                    title: "t"
                },
                simpleData: {
                    enable: true
                }
            }
        };

        var str = '{!!  $user !!}';
        var obj = eval(str);
        var zNodes = [];

        for (var i in obj) {
            zNodes.push({
                id: obj[i].id,
                pId: obj[i].pid,
                name: obj[i].username,
                t: 'ID: ' + obj[i].id,
                icon: "{{asset('admin/imgs/default_head.jpg')}}",
                open: true,
            });
        }

        $(document).ready(function () {
            $.fn.zTree.init($("#treeDemo"), setting, zNodes);
        });
    </script>
@endsection